<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Create Gradient Fills</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Create Gradient Fills</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:400px;
}
</style>
<div class="intro">
<p>
This example shows how to create gradient fills for a shape. By default, the <code>fill</code> attribute of a shape instance will generate a solid fill for the shape. Setting the <code>type</code> property on the <code>fill</code> attribute to <code>linear</code> or <code>radial</code> will create corresponding
gradient fill. Each gradient type has its own set of properties for defining the fill. Both share the <code>stop</code> property. The <code>stop</code> property defines the colors and their opacity and position in a 
gradient fill. It is an array of objects containing the following information.
</p>
   <dl>
       <dt>color</dt><dd>The color of the stop.</dd>
       <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE <= 8</dd>
       <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> 
   </dl>

<p>
Linear gradients included a rotation property which defines the direction of the gradient. (by default, linear gradients go left to right)
    <dl>
        <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
    </dl>
</p>
<p>
Radial gradients include the following additional properties:
    <dl>
       <dt>cx</dt><dd>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
           <p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p>
       </dd>
       <dt>cy</dt><dd>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
           <p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p>
       </dd>
       <dt>r</dt><dd>Radius of the gradient circle. Determines where the color stops end. The default value is 0.5.</dd>
       <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
       <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
    </dl>
</p>
</div>
<div class="example">
<div id="mygraphiccontainer"></div>
<script>
    YUI().use('graphics', function (Y) 
    { 
            var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
            var myrect = mygraphic.addShape({
				type: "rect",
				stroke: {
                    color:"#000",
                    weight: 1
                },
                fill: {
                    type: "linear",
                    rotation: 271,
                    stops: [
                        {color: "#ff6666", opacity: 1, offset: 0},
                        {color: "#00ffff", opacity: 1, offset: 0.5},
                        {color: "#000000", opacity: 1, offset: 1}
                    ]
                },
                width:685,
                height:400
            });
            var mycircle = mygraphic.addShape({
                type: "circle",
                radius: 50,
                x: 0,
                y: 0,
                fill: {
                    type: "radial",
                    stops: [
                        {color: "#ff6666", offset: 0},
                        {color: "#00ffff", offset: 0.4},
                        {color: "#000000", offset: 0.7}
                    ],
                    fx: 0.1,
                    fy: 0.3,
                    r: 0.5
                },
                stroke: {
                    color: "#000"
                }
            });

    });
</script>

</div>

<h2>HTML</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;</pre>


<h2>CSS</h2>
<pre class="code prettyprint">#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:400px;
}</pre>

<h2>Javascript</h2>

<p>Add a rectangle with a linear gradient.</p>
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
var myrect = mygraphic.addShape({
    type: &quot;rect&quot;,
    stroke: {
        color:&quot;#000&quot;,
        weight: 1
    },
    fill: {
        type: &quot;linear&quot;,
        rotation: 271,
        stops: [
            {color: &quot;#ff6666&quot;, opacity: 1, offset: 0},
            {color: &quot;#00ffff&quot;, opacity: 1, offset: 0.5},
            {color: &quot;#000000&quot;, opacity: 1, offset: 1}
        ]
    },
    width:685,
    height:400
});</pre>


<p>Add a circle with a radial gradient.</p>

<pre class="code prettyprint">var mycircle = mygraphic.addShape({
    type: &quot;circle&quot;,
    radius: 50,
    x: 0,
    y: 0,
    fill: {
        type: &quot;radial&quot;,
        stops: [
            {color: &quot;#ff6666&quot;, offset: 0},
            {color: &quot;#00ffff&quot;, offset: 0.4},
            {color: &quot;#000000&quot;, offset: 0.7}
        ],
        fx: 0.1,
        fy: 0.3,
        r: 0.5
    },
    stroke: {
        color: &quot;#000&quot;
    }
});</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
&lt;script&gt;
    YUI().use(&#x27;graphics&#x27;, function (Y) 
    { 
            var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
            var myrect = mygraphic.addShape({
				type: &quot;rect&quot;,
				stroke: {
                    color:&quot;#000&quot;,
                    weight: 1
                },
                fill: {
                    type: &quot;linear&quot;,
                    rotation: 271,
                    stops: [
                        {color: &quot;#ff6666&quot;, opacity: 1, offset: 0},
                        {color: &quot;#00ffff&quot;, opacity: 1, offset: 0.5},
                        {color: &quot;#000000&quot;, opacity: 1, offset: 1}
                    ]
                },
                width:685,
                height:400
            });
            var mycircle = mygraphic.addShape({
                type: &quot;circle&quot;,
                radius: 50,
                x: 0,
                y: 0,
                fill: {
                    type: &quot;radial&quot;,
                    stops: [
                        {color: &quot;#ff6666&quot;, offset: 0},
                        {color: &quot;#00ffff&quot;, offset: 0.4},
                        {color: &quot;#000000&quot;, offset: 0.7}
                    ],
                    fx: 0.1,
                    fy: 0.3,
                    r: 0.5
                },
                stroke: {
                    color: &quot;#000&quot;
                }
            });

    });
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to create a Graphic instance and add shapes.">
                                        <a href="graphics-simple.html">Basic Graphics Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to draw lines and polygons.">
                                        <a href="graphics-path.html">Basic Path</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create linear and radial gradient fills.">
                                        <a href="graphics-gradients.html">Create Gradient Fills</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add drag to a shape.">
                                        <a href="graphics-drag.html">Basic drag with graphic object</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to apply transforms to shape.">
                                        <a href="graphics-transforms.html">Using Transforms</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a custom shape with the Graphics module.">
                                        <a href="graphics-customshape.html">Custom Shape</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a realistic glass.">
                                        <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a violin.">
                                        <a href="graphics-violin.html">Complex Drawing: Violin</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
